<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统计系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <link rel="stylesheet" href="/static/css/swiper.min.css">
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <script type="text/javascript" src="/static/js/swiper.jquery.min.js"></script>
    <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>

    <script type="text/javascript" src="/static/js/echarts/echarts.min.js"></script>
<#--<script type="text/javascript" src="/static/js/echarts/echarts-gl.min.js"></script>-->
<#--<script type="text/javascript" src="/static/js/echarts/ecStat.min.js"></script>-->
<#--<script type="text/javascript" src="/static/js/echarts/dataTool.min.js"></script>-->
<#--<script type="text/javascript" src="/static/js/echarts/china.js"></script>-->
<#--<script type="text/javascript" src="/static/js/echarts/world.js"></script>-->
<#--<script type="text/javascript" src="/static/js/echarts/simplex.js"></script>-->


</head>
<body>
<!-- 顶部开始 -->
<div class="container">
    <div class="logo"><a href="/">统计平台</a></div>
    <div class="open-nav"><i class="iconfont">&#xe699;</i></div>
</div>
<!-- 顶部结束 -->
<!-- 中部开始 -->
<div class="wrapper">
    <!-- 左侧菜单开始 -->
    <div class="left-nav">
        <div id="side-nav">
            <ul id="nav">
               <#if menus??>
                    <#list menus as menu1>
                        <li class="list">
                            <a href="javascript:;">
                                <i class="iconfont">&#xe6a3;</i>
                                ${menu1.name}
                                <i class="iconfont nav_right">&#xe697;</i>
                            </a>
                            <ul class="sub-menu" style="display:none">

                              <#list menu1.menus as menu2>
                                  <li class="list">
                                      <a href="javascript:;">
                                          ${menu2.name}
                                          <i class="iconfont nav_right">&#xe697;</i>
                                      </a>
                                      <ul class="sub-menu sub-menu2" style="display:none">
                                               <#list menu2.menus as menu3>
                                                   <li class="list open">
                                                       <a href="/show?url= ${menu3.url}">
                                                           <i class="iconfont">&#xe6a7;</i>
                                                           ${menu3.name}
                                                       </a>
                                                   </li>
                                               </#list>
                                      </ul>
                                  </li>
                              </#list>
                            </ul>
                        </li>
                    </#list>
               </#if>
            </ul>
        </div>
    </div>
    <!-- 左侧菜单结束 -->
    <!-- 右侧主体开始 -->
    <div class="page-content">
        <p id="basePath" style="display: none">${basePath}</p>
        <p id="baseName" style="display: none">${baseName}</p>
        <div class="content">
            <div class="time">
                <ul style="display: flex; flex-flow: wrap;">
                     <#list times as time>
                         <li style="padding: 10px;width: 70px;"><p onclick="getData('${time}')"
                                                                   style="cursor: pointer">${time}</p></li>
                     </#list>
                </ul>
            </div>
            <div id="container" style="min-width:400px;height:700px"></div>
            <!-- 右侧内容框架，更改从这里结束 -->
        </div>
    </div>
    <!-- 右侧主体结束 -->
</div>
<!-- 中部结束 -->
<!-- 底部开始 -->
<div class="footer">

</div>
<!-- 底部结束 -->
</body>
<script>
    function getData(time) {
        var chart = null;
        $.getJSON('/getData?fileName=' + $("#baseName").text() + '-' + time + '.txt&path=' + $("#basePath").text() + '&callback=?', function (data) {
            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            option = null;
            var dateList = new Array();
            var valueList_success = new Array();
            var valueList_error = new Array();

            var successNum = 0;
            var errorNum = 0;
            for (da of data) {
                dateList.push(da.time);
                successNum += da.success;
                errorNum += da.error;
                valueList_success.push(da.success);
                valueList_error.push(da.error);
            }
            console.log(successNum, errorNum);
            option = {
                // Make gradient line here
                visualMap: [{
                    show: false,
                    type: 'continuous',
                    seriesIndex: 0,
                    min: 0,
                    max: 400
                }, {
                    show: false,
                    type: 'continuous',
                    seriesIndex: 1,
                    dimension: 0,
                    min: 0,
                    max: dateList.length - 1
                }],

                title: [{
                    left: 'center',
                    text: time + '-${baseName}->成功数:' + successNum
                }, {
                    top: '55%',
                    left: 'center',
                    text: time + '-${baseName}->失败数:' + errorNum
                }],
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: [{
                    data: dateList
                }, {
                    data: dateList,
                    gridIndex: 1
                }],
                yAxis: [{
                    splitLine: {show: false}
                }, {
                    splitLine: {show: false},
                    gridIndex: 1
                }],
                grid: [{
                    bottom: '60%'
                }, {
                    top: '60%'
                }],
                series: [{
                    type: 'line',
                    showSymbol: false,
                    data: valueList_success
                }, {
                    type: 'line',
                    showSymbol: false,
                    data: valueList_error,
                    xAxisIndex: 1,
                    yAxisIndex: 1
                }]
            };

            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
            console.log(data);
        });
    }
</script>


</html>